<script setup>
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue'
import { http_get, http_post } from "@/utils/request.js"
import u from "./u.js";
import { defineProps, defineEmits, onMounted, ref } from 'vue'

const emit = defineEmits(["menu-click"]);
const { sys } = defineProps(["sys"]);
const menus = ref([]);
onMounted(() => {
  http_get("/data/tree", { "type": "ms.sys.Menu", "root": sys }, rs => {
    menus.value = rs;
  });
});

function hasChildren(data) {
  return data && data.children && data.children.length > 0
}
function handleOpen(args) {

}

function handleClose(args) {

}

function menuItemClick(args) {
  emit("menu-click", args);
}

function saveData() {
  http_post("/data/save-tree?root=" + sys, menus.value, rs => {
    alert(rs.message);
  });
}
</script>
<template>
  <!-- @open="handleOpen" @close="handleClose" -->
  <!-- <div>
    <el-button @click="saveData">保 存</el-button>
  </div> -->
  <el-menu :collapse="false" :stretch="true">
    <el-sub-menu v-for="menu in menus" :index="menu.id">
      <template #title>
        <span>{{ menu.title }}</span>
      </template>
      <template #default>
        <component :is="u.comps(item)" v-for="item in menu.children" :data="item" @menu-click="menuItemClick" />
      </template>
    </el-sub-menu>
  </el-menu>
</template>